<template>
  <div>
    <template v-if="listData.length">
      <el-row :gutter="24">
        <el-col class="mb20" :span="8" v-for="(item,index) in listData" :key="index">
          <el-card shadow="hover">
            <div class="tl-center mb10">
              <el-image
                v-viewer
                alt="example"
                style="height: 280px"
                :src="item.savePath"
                fit="cover"
              />
              <!-- <span>{{ judgeType(item.accessoryType) }}</span> + -->
              <div>
                <span
                  class="mr20"
                >{{ index > 0 ? judgeType(item.accessoryType) + Number(index+1) : judgeType(item.accessoryType) }}</span>
                <el-tooltip class="item" effect="dark" content="下载" placement="top">
                  <i @click="handleDownload(item)" class="mr10 curp el-icon-download" />
                </el-tooltip>
                <!-- <el-tooltip class="item" effect="dark" content="删除" placement="top">
                  <i @click="handleDelete(item)" class="curp el-icon-delete red" />
                </el-tooltip>-->
              </div>
            </div>
            <div class="tl-center mb10">
              到期时间:
              <span>{{ item.validityEndDate }}</span>
            </div>
            <div class="tl-center mb10">
              创建人:
              <span>{{item.createUser}} {{ formatTime(item.createTime) }}</span>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </template>
    <template v-else>
      <empty-comp ref="emptyComp" />
    </template>
  </div>
</template>

<script>
import { saveOnlyUploads, deleteUploadPic, accessoryDetail } from '@/api/supplier'
import { openNotification, getSession, getDicData } from '@/utils/util'

export default {
  data() {
    return {
      listData: [],
      mdl: {
        accessoryType: null
      },
      accessoryTypeArr: []
    }
  },
  mounted() {
    if (this.$route.params.obj) {
      this.mdl = this.$route.params.obj
    } else {
      console.log('else')
      this.mdl = Object.assign(this.mdl, getSession('record'))
    }
    this.getAccessoryDetail()
    this.accessoryTypeArr = getDicData('002', '002005')
  },
  methods: {
    judgeType(key) {
      let str = ''
      this.accessoryTypeArr.map(v => {
        if (v.key === key) {
          str = v.title
        }
      })
      return str
    },
    getAccessoryDetail() {
      const { supplierCode, accessoryType } = this.mdl
      accessoryDetail({ supplierCode, accessoryType }).then(res => {
        console.log('accessory res', res)
        if (res.state === '000000') {
          this.listData = res.data
        }
      })
    },
    change(value) {
      this.$set(this.mdl, 'accessoryType', value)
      this.getAccessoryDetail()
    },
    handleDownload(item) {
      // window.open(item.savePath)
      const a = document.createElement('a')
      a.setAttribute('target', '_blank')
      a.setAttribute('href', item.savePath)
      a.setAttribute('download', item.fileName)
      a.click()
    },
    handleDelete(item) {
      console.log('item', item)
      // const _this = this
      // this.$confirm({
      //   title: '删除操作',
      //   content: `您确定删除这条记录吗？`,
      //   okText: '确定',
      //   okType: 'danger',
      //   cancelText: '取消',
      //   centered: true,
      //   async onOk() {
      //     let res = await deleteFile()
      //     if (res.state === '000000') {
      //     }
      //   }
      // })
    }
  }
}
</script>

<style scoped>
.avatar-uploader >>> .ant-upload {
  width: 200px;
  height: 200px;
}
.avatar-uploader >>> .ant-upload-list {
  display: none;
}
</style>
